<template>
  <div class="water_wrap">
    <div class="tab">
      <span
        v-for="(item, index) in tabTitList"
        :key="index"
        :class="{ activeTab: selectNum == index }"
        class="tabTit"
        @click="change(index)"
      >
        {{ item }}
      </span>
    </div>
    <div v-show="selectNum == 0" class="water-table">
      <el-table :data="holeList" header-align="center" style="height: 100%">
        <el-table-column
          prop="sensorName"
          label="测点名称"
          min-width="20%"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column label="水位" min-width="17%" show-overflow-tooltip>
          <template slot-scope="scope">
            <div>
              {{ scope.row.waterLevel && scope.row.waterLevel.toFixed(2)
              }}{{ scope.row.waterLevelUnit }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="水温值" min-width="17%" show-overflow-tooltip>
          <template slot-scope="scope">
            <div>
              {{
                scope.row.waterTemperature &&
                scope.row.waterTemperature.toFixed(2)
              }}{{ scope.row.waterTemUnit }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          min-width="14%"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div v-SimpleStateWarning="scope.row.level" />
          </template>
        </el-table-column>
        <el-table-column
          label="含水层"
          min-width="19%"
          prop="aquifer"
          show-overflow-tooltip
        />
      </el-table>
    </div>
    <div v-show="selectNum == 1" class="water-table">
      <el-table :data="waterList" header-align="center" style="height: 100%">
        <el-table-column
          prop="sensorAddress"
          label="位置"
          min-width="20%"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column label="监测值" min-width="17%" show-overflow-tooltip>
          <template slot-scope="scope">
            <div>
              {{ scope.row.monitorVal && scope.row.monitorVal.toFixed(2)
              }}{{ scope.row.valUnit }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          min-width="14%"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div v-SimpleStateWarning="scope.row.level" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-show="selectNum == 2" class="water-table">
      <el-table :data="wallList" header-align="center" style="height: 100%">
        <el-table-column
          prop="sensorAddress"
          label="测点位置"
          min-width="20%"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column label="水压/kpa" min-width="17%" show-overflow-tooltip>
          <template slot-scope="scope">
            <div>{{ scope.row.monitorHpVal }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="流量"
          min-width="20%"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <!--            <div>{{ scope.row.monitorFlowVal }}{{ scope.row.hydrUnit }}</div>-->
            <div>{{ scope.row.monitorFlowVal }}m³/h</div>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          min-width="14%"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div v-SimpleStateWarning="scope.row.level" />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Water',
  data () {
    return {
      selectNum: 0,
      tabTitList: ['长观孔监测', '井下水文监测', '密闭墙'],
      holeList: [],
      waterList: [],
      wallList: []
    }
  },
  created () {
    this.getDate()
  },
  methods: {
    async getDate () {

    },
    change (index) {
      this.selectNum = index
    }
    // showDlg(id) {
    //     // this.mpId = id
    //     this.$store.dispatch('dlgName', '涌水曲线')
    // }
  }
}
</script>
<style lang="scss" scoped>
.tab {
  display: flex;
  .tabTit {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    height: 31px;
    padding: 0 10px;
    //background: linear-gradient(180deg, #31ABD5 0%, rgba(49, 171, 213, 0) 100%);
  }
}
.activeTab {
  background: url("~@/assets/img/tabSelect.png") no-repeat;
  background-size: 100% 100%;
}
.fsc {
  font-size: 12px;
  color: #c3c3c3;
}
.water_wrap {
  margin-top: 5px;
  width: 100%;
  height: calc(100% - 36px);
}
.water-table {
  width: 100%;
  height: 100%;
  height: 700px;
}
.table_header {
  width: 100%;
  height: 26px;
  background: #003253;
  border: 1px solid rgba(49, 171, 213, 0.5019607843137255);
  opacity: 1;
}
.td {
  color: #c3c3c3;
  font-size: 16px;
  text-align: left;
}
/*设置td的宽度 */
.borehole {
  width: 25%;
}
.waterlevel {
  width: 17%;
}
.ground {
  width: 25%;
}
.state {
  width: 15%;
}
.Aquifer {
  width: 17%;
}
.table_body {
  width: 100%;
  height: calc(100% - 26px);
  padding: 5px 0;
}
.table_body .td {
  color: #fff;
  font-size: 14px;
}
.table_body .borehole {
  color: #21bcf5;
}
.tr {
  width: 100%;
  // height: 22px;
  padding: 5px 0;
  border-bottom: 1px solid #707070;
}
</style>
